.container {
  width: 100%;
  display: flex;
  height: 100%;
}

/* 小于等于 430px */
@media only screen and (max-width: 430px) {
  .container {
    width: 100%;
    height: 100%;
    display: block;
  }
  .left {
    width: 100% !important;
    .left_bottom {
      /* 三个卡片 */
      .cardContainer {
        width: 100%;
        height: 100% !important;
        display: block !important;
        .cardItem {
          width: 100% !important;
          height: 100%;
          margin-bottom: 15px !important;
        }
      }
    }
  }
  .right {
    width: 100% !important;
    max-height: 724px;
    overflow: auto;
    background-color: var(--theme-backgroundColor);
    margin-top: 15px !important;
    margin-left: 0 !important;
    border-radius: 15px;
  }
}

/* 大于 430px 且小于等于 1200px */
@media only screen and (min-width: 431px) and (max-width: 1200px) {
  .container {
    width: 100%;
    height: 100%;
    display: block;
  }
  .left {
    width: 100% !important;
    .left_bottom {
      .cardContainer {
        width: 100%;
        height: 100% !important;
        display: flex !important;
        flex-wrap: wrap;
        .cardItem {
          width: 47% !important;
          height: 100%;
          margin-bottom: 15px;
        }
      }
    }
  }
  .right {
    width: 100% !important;
    max-height: 724px;
    overflow: auto;
    background-color: var(--theme-backgroundColor);
    margin-top: 15px !important;
    margin-left: 0 !important;
    border-radius: 15px;
  }
}

.left {
  width: 80%;
  .left_bottom {
    // 三个卡片
    .cardContainer {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-between;
      .cardItem {
        width: 24%;
        height: 100%;
        background-color: var(--theme-backgroundColor);
        color: var(--theme-color);
        box-sizing: border-box;
        padding: 10px;
        border-radius: 15px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        box-shadow:
          0 1px 2px 0 rgba(0, 0, 0, 0.03),
          0 1px 6px -1px rgba(0, 0, 0, 0.02),
          0 2px 4px 0 rgba(0, 0, 0, 0.02);
        .num {
          font-size: 30px;
        }
      }
    }

    .columnChart {
      width: 100%;
      height: 500px;
      background-color: var(--theme-backgroundColor);
      margin-top: 15px;
      border-radius: 15px;
      overflow: hidden;
      box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.03),
        0 1px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px 0 rgba(0, 0, 0, 0.02);
    }
  }
}

.right {
  width: 20%;
  max-height: 724px;
  overflow: auto;
  background-color: var(--theme-backgroundColor);
  margin-left: 20px;
  border-radius: 15px;
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.03),
    0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  padding: 10px;
}
